<template>
	<!-- <CustomNavBar :showBack="false">
		<template #left>
			<topLeftIconVue></topLeftIconVue>
		</template>
	</CustomNavBar>
	<view class="pages" :style="{ paddingTop: `${data.navBarHeight}px` }"> -->
	<view class="pages" >
		<block v-if="!data.isSearchRest">
			<!-- <view class="search_box">
				<image src="/static/coment/icon-search@2x.svg" mode="aspectFill" class="search_icon"></image>
				<input type="text" placeholder="搜索你想要的房源" confirm-type="search" @confirm="searchConfirm" v-model="searchValue" class="full_flex" />
			</view> -->
			<view class="search_boxto">
				<view class="search_boxViews">
					<image src="/static/coment/icon-search@2x.svg" mode="aspectFill" class="search_icon"></image>
					<input type="text" placeholder="搜索你想要的房源" confirm-type="search" @confirm="searchConfirm" v-model="searchValue"
						class="full_flex" />
				</view>
				<view class="texts" @click="navigateBackFunc">
					取消
				</view>
			</view>
			<view class="historicalrecords">
				<view class="leftText">
					历史记录
				</view>
				<view class="icons" v-if="browseList.length>0">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/del.png" mode="aspectFit" class="images" @click="clearStorage"></image>
				</view>
			</view>
			<view class="listItems">
				<view class="items" v-for="(item,index) in browseList" :key="index" @click="handleBrowse(item)">
					{{item}}
				</view>
			</view>
		</block>
		<block v-else>
			<view class="search_boxto">
				<view class="search_boxViews">
					<image src="/static/coment/icon-search@2x.svg" mode="aspectFill" class="search_icon"></image>
					<input type="text" placeholder="搜索你想要的房源" confirm-type="search" @confirm="searchConfirm" v-model="searchValue"
						class="full_flex" />
				</view>
				<view class="texts" @click="navigateBackFunc">
					取消
				</view>
			</view>


			<view class="itemVies">
				<block v-if="houseList.length>0">
					<filtrateBoxVue @confirmData='confirmData'></filtrateBoxVue>
					<view style="padding: 0 30rpx;">
						<itemsVue :listData='item' v-for="(item,index) in houseList" :key="index"></itemsVue>
					</view>

				</block>
				<block v-else>
					<view class="noeimages">
						<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit" class="kongImg"></image>
						<view class="testImgs">
							搜索不到结果，换个条件试试吧！
						</view>
					</view>
					<view class="heradsTitle">
						热门房源
						<image src="/pagesA/static/huo.png" mode="aspectFit" class="hous"></image>
					</view>
					<view class="listCopse">
						<block v-for="(item,index) in hotsList" :key="item">
							<itemsVue :listData='item'></itemsVue>
						</block>
					</view>
				</block>

			</view>
		</block>
		<view style="width: 100%;height: 20px;"></view>
	</view>
</template>

<script setup>
	import CustomNavBar from '@/components/CustomNavBar.vue';
	import topLeftIconVue from '@/components/topLeftIcon.vue';
	import itemsVue from './components/items.vue';
	import filtrateBoxVue from '@/pages/home/components/filtrateBox.vue'
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		setStorage,
		getStorage,
		removeStorage
	} from './js/storage.js'
	import {
		getHouseList,
		getHouseHotsList
	} from './js/api.js'
	const app = getApp()
	const data = reactive({
		isSearchRest: false,
		navBarHeight: 0
	})
	const navigateBackFunc = () => {
		uni.navigateBack()
	}
	const searchValue = ref('')
	const browseList = ref([])
	const searchConfirm = () => {
		let list = browseList.value || []
		if (searchValue.value) {
			list.unshift(searchValue.value)
			list = [...new Set(list)]
			//只存10个
			if (list.length > 10) list = list.slice(0, 10)
			browseList.value = [...list];
			setStorage('browseList', list)
		}
		paramsData.searchValue = searchValue.value
		getData()
	}
	const clearStorage = () => {
		browseList.value = []
		removeStorage('browseList')
	}
	const handleBrowse = (item) => {
		searchValue.value = item
		paramsData.searchValue = searchValue.value
		getData()
	}
	onMounted(() => {
		data.navBarHeight = app.globalData.navBarHeight + app.globalData.statusBarHeight
		browseList.value = getStorage('browseList') || []
	})
	const confirmData = (params) => {
		let paramsT = {
			...params,
			pageNum: 1,
			pageSize: 10
		}
		getData(paramsT)
	}
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10,
		searchValue: ''
	})
	const houseList = ref([])
	const getData = async (params) => {
		let paramsDataT = paramsData
		if(params) paramsDataT = params
		let res = await getHouseList(paramsDataT)
		let list = res.data.data.list
		houseList.value = list
		data.isSearchRest = true
		// console.log('res====', res)
		if (list.length == 0) {
			//没有数据展示热门
			getHotData()
		}
	}
	const hotsList = ref([])
	//获取热门
	const getHotData = async () => {
		let params = {
			pageNum: 1,
			pageSize: 10,
		}
		let res = await getHouseHotsList(params)
		let list = res.data.data
		hotsList.value = list
	}
</script>

<style lang="less" scoped>
	.pages {
		width: 100%;
		// min-height: 100vh;
		background-color: #fff;


		.search_box {
			margin: 32rpx;
			padding: 14rpx 32rpx;
			border-color: #000000;
			background: #FFFFFF;
			border: 2rpx solid rgba(204, 204, 204, 1);
			border-radius: 16rpx;
			display: flex;

			.search_icon {
				width: 60rpx;
				height: 60rpx;
			}

			.full_flex {
				flex: 1;
				height: 60rpx;

			}
		}

		.historicalrecords {
			width: 690rpx;
			height: 80rpx;
			// border: 1px solid red;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.leftText {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #000000;
				line-height: 72rpx;
				font-weight: 600;
				display: flex;
				align-items: center;

			}

			.icons {
				width: 40rpx;
				height: 40rpx;

				// border: 1px solid red;
				.images {
					width: 100%;
					height: 100%;
				}
			}
		}

		.listItems {
			width: 690rpx;
			min-height: 50rpx;
			margin: auto;
			margin-top: 10rpx;
			// border: 1px solid red;
			display: flex;
			flex-wrap: wrap;

			.items {
				background: #F2F2F2;
				border-radius: 52rpx;
				min-width: 126rpx;
				height: 52rpx;
				font-family: PingFangSC-Regular;
				font-size: 26rpx;
				color: #666666;
				line-height: 28rpx;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 12rpx 24rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
			}
		}

		.search_boxto {
			width: 690rpx;
			height: 80rpx;
			margin: auto;
			// border: 1px solid red;
			margin: 30rpx auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.search_boxViews {
				width: 534rpx;
				height: 100%;
				border: 2rpx solid;
				border-color: rgba(204, 204, 204, 1);
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;

				.search_icon {
					width: 60rpx;
					height: 60rpx;
				}

				.full_flex {
					flex: 1;
					height: 60rpx;

				}
			}

			.texts {
				font-family: PingFangSC-Regular;
				font-size: 30rpx;
				color: #666666;
				line-height: 40rpx;
				font-weight: 400;
			}
		}


		.itemVies {
			// width: 690rpx;
			min-height: 500rpx;
			// border: 1px solid red;
			margin: auto;



			.noeimages {
				width: 100%;
				height: 200rpx;
				// border: 1px solid red;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.kongImg {
					width: 179rpx;
					height: 178rpx;
					margin: auto;
				}

				.testImgs {
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #999999;
					text-align: center;
					font-weight: 400;
				}
			}

			.heradsTitle {
				width: 690rpx;
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 600;
				margin: auto;
				// border: 1px solid red;
				display: flex;
				margin-top: 48rpx;

				.hous {
					width: 34rpx;
					height: 42rpx;
					margin-left: 16rpx;
				}
			}

			.listCopse {
				width: 690rpx;
				margin: auto;
				margin-top: 30rpx;
			}
		}
	}
</style>